<template>
  <div>
    <div>商品名称：{{ shop.name }}</div>
    <div>商品描述：
        <div v-html="shop.desc"></div>
        
    </div>
    <div>
      商品评论：
      <div v-for="item in shop.pinlun">
        {{ item.name }}

        <div>{{ item.content }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, defineProps, reactive, ref } from "vue";

const getData = (id: string) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        name: "我是商品的标题",
        desc: "<p>我是商品的详情</p><img src='/static/imgs/demo1.png' /><img src='/static/imgs/demo1.png' />",
        pinlun: [{ name: "张三", content: "这个商品太好了" }],
      });
    }, 500);
  });
};

const props = defineProps({
  id: String,
});

// const state = reactive({
//   name: "",
//   desc: "",
//   pinlun: [],
// });

const shop = ref({});

onMounted(async () => {
  let _res: any = await getData(props.id);

  shop.value = _res;

  //   state.name = _res.name;
  //   state.desc = _res.desc;
  //   state.pinlun = _res.pinlun;
  //   console.log("🚀 ~ file: index.vue:30 ~ onMounted ~ _res", _res);
});

// 通过 sessionStorage 获取复杂数据
// onMounted(() => {
//   let _data = sessionStorage.getItem(PARAMS.LIST_TO_DETAIL);

//   if(_data) {
//     _data = JSON.parse(_data)
//   }

//   sessionStorage.removeItem(PARAMS.LIST_TO_DETAIL);
//   console.log("🚀 ~ file: index.vue:12 ~ onMounted ~ _data", _data);
// });
</script>

<style lang="less" scoped></style>
